import React, { useState, useContext, useEffect } from "react";
import { Space, Table } from "antd";
import { UserContext } from "../store";
import { PlusOutlined } from "@ant-design/icons";
import { getAuthList } from "../../../api/auth";

const MyTable = () => {
  const { store, dispatch } = useContext(UserContext);
  const col = [
    {
      title: "ID编号",
      dataIndex: "id",
      key: "id"
    },
    {
      title: "权限名称",
      dataIndex: "name",
      key: "name"
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (text, record) => {
        return (
          <Space size="middle">
            <span>{text === 0 ? "禁用" : "启用"} </span>
          </Space>
        );
      }
    },
    {
      title: "操作 ",
      key: "action",
      render: (text, record, index) => (
        <Space size="middle">
          <a
            onClick={() => {
              onEdit(text, record, index);
            }}
          >
            编辑
          </a>
          <a>删除</a>
        </Space>
      )
    }
  ];

  useEffect(() => {}, [store.visible]);

  const onEdit = (text, record, index) => {
    dispatch({
      type: "actionItem",
      actionItem: { ...text }
    });

    dispatch({
      type: "visible",
      visible: true,
      isEdit: true
    });
  };

  useEffect(() => {
    getAuthList().then((res) => {
      dispatch({
        type: "authList",
        authList: res.data
      });
      dispatch({
        type: "finalList",
        finalList: res.data
      });
    });
  }, []);

  return <Table dataSource={store.authList} rowKey="id" columns={col}></Table>;
};

export default MyTable;
